<template>
	<view class="bgf8" style="height: 100vh;">
		<view style="position: fixed;top: 0rpx;z-index: 99;">
			<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
				swiperWidth="750" inactive-color="rgba(102,102,102,1)" active-color="rgba(36,191,129,1)"></u-tabs-swiper>
		</view>
		<swiper style="height: 100vh;margin-top:100rpx" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="width: 100%;height: 100vh;" @scrolltolower="onreachBottom">
					<QBdingdan></QBdingdan>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="width: 100%;" @scrolltolower="onreachBottom">
				<Qzhifu></Qzhifu>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="width: 100%;" @scrolltolower="onreachBottom">
					<Qpeisong></Qpeisong>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="width: 100%;" @scrolltolower="onreachBottom">
					<Qshouhuo></Qshouhuo>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="width: 100%;" @scrolltolower="onreachBottom">
					<Qpingjia></Qpingjia>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
					<Yquxiao></Yquxiao>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import QBdingdan from "./QBdingdan/QBdingdan"
	import Qzhifu from "../Mine/Dzhifu/Dzhifu"
	import Qpeisong from "../Mine/Dpeisong/Dpeisong"
	import Qshouhuo from "../Mine/Dshouhuo/Dshouhuo"
	import Qpingjia from "../Mine/Dpinjia/Dpinjia"
	import Yquxiao from "./Yquxiao/Yquxiao"
	export default {
		components:{
			QBdingdan,Qzhifu,Qpeisong,Qshouhuo,Qpingjia,Yquxiao
		},
		data() {
			return { 
				idx : 0,
				list: [{
					name: '全部'
				}, {
					name: '待支付'
				}, {
					name: '待配送'
				}, {
					name: '待收货'
				}, {
					name: '待评价'
				}, {
					name: '已取消'
				}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
			}
		},
		methods: {
			Ptcolor(idx){
				this.idx = idx
			},
			// tabs通知swiper切换
						tabsChange(index) {
							this.swiperCurrent = index;
						},
						// swiper-item左右移动，通知tabs的滑块跟随移动
						transition(e) {
							let dx = e.detail.dx;
							this.$refs.uTabs.setDx(dx);
						},
						// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
						// swiper滑动结束，分别设置tabs和swiper的状态
						animationfinish(e) {
							let current = e.detail.current;
							this.$refs.uTabs.setFinishCurrent(current);
							this.swiperCurrent = current;
							this.current = current;
						},
						// scroll-view到底部加载更多
						onreachBottom() {
							
						}
		}
	}
</script>

<style>
.title>text{
		display: block;
		color: rgba(51,51,51,1);
		text-align: center;
		line-height: 88rpx;
		background: #FFFFFF;
	}
	.DD-top>view{
		background: #FFFFFF;
		width: 20%;
		text-align: center;
		padding: 26rpx 0;
	}
	.DD-img{
		width: 306rpx;
		height: 218rpx;
		margin: 0 auto;
		margin-top: 162rpx;
	}
	.DD-img>image{
		display: block;
		margin: 0 auto;
	}
	.PTcolor{
		color: rgba(36,191,129,1);
		padding: 10rpx 0;
		border-bottom: 8rpx solid rgba(36,191,129,1);
	}
	.uni-swiper{
		height: 1000rpx!important;
	}
</style>
